<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width"/>

        <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
        <link rel="stylesheet" href="resources/css/style.css" media="screen"/>
        <!--[if lte IE 7]><link rel="stylesheet" href="/resources/css/style.ie7.css" media="screen" /><![endif]-->
        <link rel="stylesheet" href="resources/css/style.responsive.css" media="all"/>
        <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
        <h:outputStylesheet library="css" name="estilosocialicon.css"/>

        <meta name="description" content="Description"/>
        <meta name="keywords" content="Keywords"/>
        <style>.art-content .art-postcontent-0 .layout-item-0 { margin-top: 30px;margin-bottom: 10px;  }
            .art-content .art-postcontent-0 .layout-item-1 { border-style:Dotted;border-top-width:0px;border-right-width:1px;border-bottom-width:0px;border-left-width:0px;border-color:#CCCCCC; padding-top: 0px;padding-right: 20px;padding-bottom: 0px;padding-left: 20px;  }
            .art-content .art-postcontent-0 .layout-item-2 { padding-top: 0px;padding-right: 20px;padding-bottom: 0px;padding-left: 20px;  }
            .ie7 .post .layout-cell {border:none !important; padding:0 !important; }
            .ie6 .post .layout-cell {border:none !important; padding:0 !important; }

        </style>
        <h:outputScript library="js" name="common.js" />
        <h:outputScript library="js" name="socialicon.js" />
    </h:head>

    <h:body>

        <div id="art-main">
            <header class="art-header clearfix">


                <div class="art-shapes">

                    <h1 class="art-headline" data-left="1.92%">
                        <a href="#"><p:outputLabel value=" Zona-UCuenca"/></a>
                    </h1>
                    <h2 class="art-slogan" data-left="1.92%"><p:outputLabel value="Eventos, Información, Foros, Galerías"/></h2>

                    <div style="position: absolute; top: 150px;">
                    </div>
                </div>
            </header>
            <div class="art-sheet clearfix" >

                <div class="art-layout-wrapper clearfix">
                    <div class="art-content-layout">
                        <div class="art-content-layout-row">
                            <div class="art-layout-cell art-content clearfix">

                                <article class="art-post art-article">


                                    <div class="art-postcontent art-postcontent-0 clearfix">
                                        <div class="art-content-layout">
                                            <div id="content-left" style="width: 100%; float: left; display: inline-block; min-height: 580px;">
                                                <div class="container">
                                                    <main class="content">
                                                        <!--strong>Contentido</strong> contenido div
                                                        <a href="#" class="expand">link contenido</a-->
                                                        <h:form>     
                                                            <h:outputText value="Selecciona tu Escuela" style="font-size: 14pt;"/> 
                                                            <p:dataGrid value="#{gestorPrincipal.escuelas}" var="esc" columns="4" style="width: 100%;">  

                                                                <p:panel header="#{esc.nombre}" style="text-align:center; width: 200px; height: 250px; "> 
                                                                    <h:panelGrid columns="1" style="width:100%">  


                                                                        <p:graphicImage width="100" height="100" rendered="#{esc.imagen != null and esc.imagen != ''}" 
                                                                                        value="#{esc.imagen}"/>


                                                                        <h:outputText value="#{esc.descripcion}" />  

                                                                        <p:commandButton value="Acceder" icon="ui-icon-search" action="#{gestorPrincipal.paginaEscuelaRedir(esc)}"/>  
                                                                    </h:panelGrid>  
                                                                </p:panel>  
                                                            </p:dataGrid>  

                                                        </h:form>
                                                    </main><!-- .content -->
                                                </div><!-- .container-->
                                            </div>
                                        </div>
                                    </div>
                                </article></div>
                        </div>
                    </div>
                </div><footer>
                    <div id="footer">
                        <div class="wrapper">
                            <div id="left">

                                <p>
                                    Aso Escuelas - Universidad de Cuenca
                                    <br/>
                                    Página informativa
                                </p>

                            </div>

                            <div id="testimonials">
                                <p>
                                    <ul class="social" id="jquery">
                                        <h:panelGroup rendered="#{gestorPrincipal.hayEscuela() and gestorPrincipal.escuela.facebook != null and gestorPrincipal.escuela.facebook != ''}">
                                            <li class="facebook">
                                                <a href="#{gestorPrincipal.escuela.facebook}" target="_blank"><strong>Facebook</strong></a>
                                            </li>
                                        </h:panelGroup>
                                        <h:panelGroup rendered="#{gestorPrincipal.hayEscuela() and gestorPrincipal.escuela.twitter != null and gestorPrincipal.escuela.twitter != ''}">
                                            <li class="twitter">
                                                <a href="#{gestorPrincipal.escuela.twitter}" target="_blank"><strong>Twitter</strong></a>
                                            </li>
                                        </h:panelGroup>
                                    </ul>                        
                                </p>

                            </div>

                            <div id="copyright">
                                <p>© 2013 AsoSistemas Web System. All Rights Reserved.</p>

                                <div class="right">
                                    <p>
                                        <a href="#">Contactarnos</a>
                                        | 
                                        <a href="#top">Regresar arriba</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </footer>

            </div>
            <p class="art-page-footer">
                <span id="art-footnote-links"><a href="http://www.artisteer.com/" target="_blank">Web Template</a> created with Artisteer.</span>
            </p>
        </div>


    </h:body>
</html>

